<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>国际贸易</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
<script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
<script type="text/javascript" src="/admin/lib/respond.min.js"></script>
<![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" href="/home/css/index.css">
    <!--[if IE 6]>
<script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<style type="text/css">
  *{margin:0;padding:0;}
  
  /*自己的*/
  .page-container {
      width: 1000px;
      height: 400px;
      background-color: rgba(170,174,180, .8);
      margin: 0 auto;
      margin-top: 50px;
  }
  .slideshow {
    z-index: -20;
  }
  .table-bg thead th, .dataTable td.sorting_1, select, input {
    background-color: rgba(170,174,180, .5);
  }

  /*自己的*/

  .slideshow {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50%;
    background-size: cover;
    -webkit-animation-name: kenburns;
            animation-name: kenburns;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
            animation-duration: 16s;
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  .slideshow-image:nth-child(1) {
    -webkit-animation-name: kenburns-1;
            animation-name: kenburns-1;
    z-index: 3;
  }
  .slideshow-image:nth-child(2) {
    -webkit-animation-name: kenburns-2;
            animation-name: kenburns-2;
    z-index: 2;
  }
  .slideshow-image:nth-child(3) {
    -webkit-animation-name: kenburns-3;
            animation-name: kenburns-3;
    z-index: 1;
  }
  .slideshow-image:nth-child(4) {
    -webkit-animation-name: kenburns-4;
            animation-name: kenburns-4;
    z-index: 0;
  }

  @-webkit-keyframes kenburns-1 {
    0% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    1.5625% {
      opacity: 1;
    }
    23.4375% {
      opacity: 1;
    }
    26.5625% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    98.4375% {
      opacity: 0;
      -webkit-transform: scale(1.21176);
              transform: scale(1.21176);
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes kenburns-1 {
    0% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    1.5625% {
      opacity: 1;
    }
    23.4375% {
      opacity: 1;
    }
    26.5625% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    98.4375% {
      opacity: 0;
      -webkit-transform: scale(1.21176);
              transform: scale(1.21176);
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    26.5625% {
      opacity: 1;
    }
    48.4375% {
      opacity: 1;
    }
    51.5625% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
  }
  @keyframes kenburns-2 {
    23.4375% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    26.5625% {
      opacity: 1;
    }
    48.4375% {
      opacity: 1;
    }
    51.5625% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
  }
  @-webkit-keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    51.5625% {
      opacity: 1;
    }
    73.4375% {
      opacity: 1;
    }
    76.5625% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
  }
  @keyframes kenburns-3 {
    48.4375% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    51.5625% {
      opacity: 1;
    }
    73.4375% {
      opacity: 1;
    }
    76.5625% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
  }
  @-webkit-keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    76.5625% {
      opacity: 1;
    }
    98.4375% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes kenburns-4 {
    73.4375% {
      opacity: 1;
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    76.5625% {
      opacity: 1;
    }
    98.4375% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }


  h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
    z-index: 99;
    text-align: center;
    font-family: Raleway, sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0 1em 2em -1em rgba(0, 0, 0, 0.5);
    padding: 1em 2em;
    line-height: 1.5;
  }
  h1 small {
    display: block;
    text-transform: lowercase;
    font-size: .7em;
  }
  h1 small:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding-bottom: .5em;
  }
  h1 small:last-child {
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    padding-top: .5em;
  }
</style>
</head>
<body>
    <!-- 你可以添加个多“.slideshow-image”项目, 记得修改CSS -->
    <div class="slideshow">
      <div class="slideshow-image" style="background-image: url('/home/images/member_img/1.jpg')"></div>
      <div class="slideshow-image" style="background-image: url('/home/images/member_img/2.jpg')"></div>
      <div class="slideshow-image" style="background-image: url('/home/images/member_img/3.jpg')"></div>
      <div class="slideshow-image" style="background-image: url('/home/images/member_img/4.jpg')"></div>
    </div>

<!-- 文字区不需要请连css部分代码一并删除 -->

    <header>
         <div class="header_wrap">
            <p>商务英语、国际贸易系列教学软件，涵盖了教学资源、教学课程、考试和专业实习。 产品贯穿教学的整个过程，能够辅助老师教学，训练与考察学生的各个技能点，对提高学生的实践能力起到促进作用，帮助学生更快更好地适应工作岗位。</p>
            <div class="logo"></div>
         </div>
    </header>

    <div class="page-container">

        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg table-sort">
                <thead>
                    <tr class="text-c">
                        <th width="30">ID</th>
                        <th width="100">中文名</th>
                        <th width="40">英文名</th>
                        <th width="90">解释</th>
                        <!-- <th width="100">操作</th> -->
                    </tr>
                </thead>
                <tbody>
                  @foreach($data as $val)
                    <tr class="text-c">
                        <td>{{$val -> id}}</td>
                        <td>{{$val -> lan_name}}</td>
                        <td>{{$val -> English_name}}</td>
                        <td>{{$val -> expression}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

    </div>
    <!--_footer 作为公共模版分离出去-->
    <script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/admin/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
    <!--/_footer 作为公共模版分离出去-->
    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.table-sort').dataTable({
            "aaSorting": [
                [0, "desc"]
            ], //默认第几个排序
            "aLengthMenu": [[5, 10, 15, -1], ["5条", "10条", "15条", "All"]],//二组数组，第一组数量，第二组说明文字;
            //"aLengthMenu": [10, 25, 50, -1];//也可以直接用一维数组设置数量
        });

    });

    //跳转到首页
    $('.logo').on('click', function () {
        $(location).attr('href', '/');
    });
    
    
    </script>

</body>
</html>

